<template>
  <div>
    <el-form :model="productInfo" :rules="rules" ref="ruleForm" label-width="110px">
      <h4 class="list-title">基本信息</h4>
      <div class="form-content">
        <el-form-item label="商品分类:" required>
          {{classifyName.firstClassify}}<i class="el-icon-arrow-right"></i>{{classifyName.secClassify}}<i
          class="el-icon-arrow-right"></i>{{classifyName.thiClassify}}
        </el-form-item>

        <el-form-item label="商品名称:" prop="productName">
          <el-input v-model="productInfo.productName"></el-input>
        </el-form-item>

        <el-form-item label="商品标准名称:" prop="standardName">
          <el-input v-model="productInfo.standardName"></el-input>
        </el-form-item>
        <el-form-item label="店铺分类:" prop="shopTypeId">
          <el-select v-model="productInfo.shopTypeId" placeholder="全部">
            <el-option
              v-for="item in shopTypeIdList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品描述:" prop="desc">
          <el-input type="textarea" v-model="productInfo.description"
                    :autosize="{ minRows: 3, maxRows: 5}"></el-input>
        </el-form-item>

        <el-form-item label="销售价格:" prop="price">
          <el-input v-model="productInfo.price">
            <template slot="append">（元）</template>
          </el-input>
        </el-form-item>
      </div>

      <h4 class="list-title">品牌规格</h4>
      <div class="form-content">
        <el-form-item label="商品规格:" prop="specifications">
          <el-input v-model="productInfo.specifications"></el-input>
          <span class="c-gray">例：箱/6瓶/250ml</span>
        </el-form-item>
        <el-form-item label="商品产地:" prop="productAddress">
          <el-input v-model="productInfo.productAddress"></el-input>
        </el-form-item>
        <el-form-item label="商品生产商:" prop="producer">
          <el-input v-model="productInfo.producer"></el-input>
        </el-form-item>
        <el-form-item label="商品品牌:" prop="brand">
          <el-input v-model="productInfo.brand"></el-input>
          <span class="c-gray">如果您不输入，则为无。</span>
        </el-form-item>
        <el-form-item label="商品图片:" prop="picUrl">
          <div class="imgBlock" @click="isUploadImg = true">
            <img v-if="productInfo.picUrl !== ''" :src="productInfo.picUrl" alt="">
            <div v-else><i class="c-gray el-icon-plus"></i></div>
          </div>
        </el-form-item>
        <el-form-item label="其他信息:" prop="remark">
          <el-input v-model="productInfo.remark"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <div class="mt20 text-center">
      <el-button type="info" @click="goBackStep2">上一步，选择行业分类</el-button>
      <el-button type="primary" @click="nextStep3('ruleForm')">提交上架</el-button>
    </div>
    <jxf-cropper :isShowCropper.sync="isUploadImg" :dealImage="productInfo.picUrl" :uploadUrl="uploadUrl"
                 @getChangedImage="updateProductImg"></jxf-cropper>
  </div>
</template>

<script>
  let timer = null
  export default {
    name: "AddProductInfoForm",
    props: {
      commitInfo: {
        type:Object,
        default:() =>{
          return {
            supplyId : null
          }
        }
      },
      classifyName: {
        default: () => {
          return {
            firstClassify: "",
            secClassify: "",
            thiClassify: ""
          }
        }
      }
    },
    data() {
      return {
        shopTypeIdList:[],
        isUploadImg: false,
        uploadUrl: apis.product.uploadImg,
        productInfo: {
          productName: '',
          standardName: '',
          brand: "",
          productAddress: "",
          producer: '',
          specifications: "",
          shopTypeId: "",
          picUrl: "",
          price: "",
          description: "",
          remark:""
        },
        rules: {
          productName: [{required: true, message: '请输入商品名称', trigger: 'blur'},
            {validator: validate.length15, trigger: 'change'}],
          standardName: [{required: true, message: '请输入商品标准名称', trigger: 'blur'},
            {validator: validate.length30, trigger: 'change'}],
          shopTypeId: [{required: true, message: '请选择店铺分类', trigger: 'change'}],
          description: [{validator: validate.length50, trigger: 'change'}],
          price: [{required: true, message: '请输入销售价格', trigger: 'blur'},
            {validator: validate.price, trigger: 'change'}],
          specifications: [{required: true, message: '请输入商品规格', trigger: 'blur'},
            {validator: validate.length30, trigger: 'change'}],
          productAddress: [{validator: validate.length30, trigger: 'change'}],
          producer: [{validator: validate.length30, trigger: 'change'}],
          brand: [{validator: validate.length30, trigger: 'change'}],
          picUrl: [{required: true, message: '请上传商品主图', trigger: 'change'}]
        }
      }
    },
    watch:{
      'commitInfo.supplyId':{
        handler:function (val) {
          this.getProductShopTypeList(val)
        }
      }
    },
    methods: {
      // 获取商品分类
      getProductShopTypeList(supplyId) {
        ajax.post(apis.product.getProductShopTypeList,{supplyId:supplyId})
          .then(res => {
            if (res.success === true) {
              if (res.data !== [] && res.data !== null) {
                this.shopTypeIdList = res.data.map(item => {
                  return {
                    label: item.storeClassifyName,
                    value: item.id
                  }
                })
              } else {
                this.shopTypeIdList = []
              }
            }
          })
      },
      // 商品图片修改
      updateProductImg(data) {
        this.productInfo.picUrl = data
      },
      goBackStep2() {
        this.$emit('goBackStep2')
      },
      nextStep3(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addProduct()
          } else {
            return false;
          }
        });
      },
      // 添加商品
      addProduct() {
        let info = {...this.productInfo,...this.commitInfo}
        ajax.post(apis.product.insertProduct, info)
          .then(res => {
            if (res.success === true) {
              this.$confirm('<h2>操作成功</h2><p style="padding: 10px;" class="c-gray">商品添加成功</p>', {
                showCancelButton: false,
                showConfirmButton: false,
                dangerouslyUseHTMLString: true,
                customClass: "jxf-errorTip",
                type: 'success',
                center: true
              }).then(() => {
              }).catch(() => {
              });
              this.threeSecondsToListPage()
            }else{
              this.$message({
                message: res.message,
                type: 'error'
              });
            }
          })
      },

      threeSecondsToListPage() {
        let count = 3
        timer = setInterval(() => {
          if (count > 0) {
            count--;
          } else {
            this.clearTimer()
            location.reload()
          }
        }, 1000)
      },
      clearTimer() {
        clearInterval(timer);
        timer = null;
      }
    }
  }
</script>

<style lang="scss" scoped>

  .imgBlock {
    & > div, & > img {
      cursor: pointer;
      width: 120px;
      height: 120px;
    }
    & > div {
      border: 1px solid #f3f3f3;
      text-align: center;
      line-height: 120px;
      i {
        font-size: 40px;
      }
    }
  }

  .form-content {
    max-width: 600px;
    margin: 20px auto;
  }
</style>
